<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/base.css">
    <title>jQuery实现轮播图</title>
    <style>
        h1 {
            text-align: center;
            margin: 50px auto;
            color: #666;
        }

        /* 整个 滚动轮播图 容器 */
        #container {
            position: relative;
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            overflow: hidden;
        }

        /* 图片区 */
        .inner {
            position: relative;
            left: 0px;
            top: 0;
            width: 8582px;
            height: 460px;
            background-color: green;
        }

        .innerwraper {
            float: left;
        }

        .pagination {
            position: absolute;
            left: -153px;
            /* left的负值，一定要是width值的1/2,两个同时修改 */
            bottom: 0;
            margin-left: 50%;
            width: 320px;
            height: 56px;
        }

        /*  圆点列表区  */
        .pagination .dot-item {
            float: left;
            width: 28px;
            height: 6px;
            margin-left: 30px;
            margin-top: 25px;
            background-color: rgba(0, 0, 0, .2);
            cursor: pointer;
        }

        .pagination .dot-item:hover {
            background-color: rgba(255, 255, 255, .8);
        }

        .pagination .active {
            background-color: rgba(255, 255, 255, .8);
        }

        /* 左右切换区 */
        .switch {
            position: absolute;
            width: 41px;
            height: 69px;
            top: 185px;
            /* 父容器高度460-69/2 = 195.5 ，top值略微靠近上方*/
            color: white;
            background-image: url('img/carousel_switch_arrow.png');
            cursor: pointer;
        }

        .switch.left {
            left: 0px;
            background-position-x: -84px;
        }

        .switch.right {
            right: 0px;
            background-position-x: -123px;
        }

        /* 鼠标hover */
        .switch.left:hover {
            background-position-x: 0px;
        }

        .switch.right:hover {
            background-position-x: -41px;
        }
    </style>
</head>

<body>

    <h1>小米官网轮播图(滑动轮播)</h1>
    <!-- 布局 -->
    <div id="container">
        <!-- 图片区 -->
        <div class="inner clearfix">
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/5.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/1.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/2.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/3.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/4.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/5.jpg" alt=""></a>
            </div>
            <div class="innerwraper">
                <a href="javascript:;"><img width='1226px' height='460px' src="img/1.jpg" alt=""></a>
            </div>
        </div>
        <!-- 圆点列表区 -->
        <div class="pagination clearfix">
            <div class="dot-item active"></div>
            <div class="dot-item"></div>
            <div class="dot-item"></div>
            <div class="dot-item"></div>
            <div class="dot-item"></div>
        </div>
        <!-- 左右切换区 -->
        <div class="switch left"></div>
        <div class="switch right"></div>

        <script src="js/jQueryV2.2.4.js"></script>
        <script>
            window.onload = function () {
                let index = 0;
                //原点列表
                let dotItem = $('.pagination .dot-item');
                $('.inner').css({
                    left: "-" + (index + 1) * 1226 + "px"
                })

                //总体思路是：
                //先实现圆点列表 点击切换样式效果
                //再实现原点点击 伴随图片切换
                //再实现左右箭头点击切换图片
                //再实现图片自动轮播

                //点击圆点列表时： 
                //1切换样式 2修改父容器left值，以达到图片切换的效果
                function clickDotItem() {
                    dotItem.click(function () {
                        //判断点击圆点索引值
                        index = $.inArray($(this).get(0), $('.pagination .dot-item').get());
                        //切换点击样式
                        $(this).addClass('active').siblings().removeClass('active');
                        //切换图片，修改left值实现
                        $('.inner').css({
                            transition: ".6s ease",
                            left: "-" + (index + 1) * 1226 + "px"
                        })
                    })
                }

                function prevImg() {
                    $('.left').click(function (event) {
                        $(this)[0].style.pointerEvents = "none";
                        setTimeout(() => {
                            $(this)[0].style.pointerEvents = "visible";
                            console.log("ok")
                        }, 591);
                        
                        if (index === 0) {
                            //原点样式，跟随变化
                            dotItem.eq(4).addClass('active').siblings().removeClass('active');
                            //切换图片，修改left值实现
                            $('.inner').css({
                                transition: '.6s ease',
                                left: "-" + index * 1226 + "px"
                            });
                            index = 4;

                            setTimeout(() => {
                                $('.inner').css({
                                    transition: '0s',
                                    left: "-" + (index + 1) * 1226 + "px"
                                });
                            }, 590);

                        } else {
                            index--;
                            //原点样式，跟随变化
                            dotItem.eq(index).addClass('active').siblings().removeClass('active');
                            //切换图片，修改left值实现
                            $('.inner').css({
                                transition: '.6s ease',
                                left: "-" + (index + 1) * 1226 + "px"
                            });
                        }
                    })
                }

                function nextImg() {
                    $('.right').click(function () {
                        //点击失效0.6s
                        $(this)[0].style.pointerEvents = "none";
                        setTimeout(() => {
                            $(this)[0].style.pointerEvents = "visible";
                            console.log("ok")
                        }, 591);

                        if (index === 4) {
                            //原点样式，跟随变化
                            dotItem.eq(0).addClass('active').siblings().removeClass('active');
                            //切换图片，修改left值实现
                            $('.inner').css({
                                transition: '.6s ease',
                                left: "-" + (index + 2) * 1226 + "px"
                            });



                            setTimeout(function () {
                                $('.inner').css({
                                    transition: '0s',
                                    left: "-" + (index + 1) * 1226 + "px"
                                });
                            }, 590);

                            index = 0;
                        } else {
                            index++;
                            //原点样式，跟随变化
                            dotItem.eq(index).addClass('active').siblings().removeClass('active');
                            //切换图片，修改left值实现
                            $('.inner').css({
                                transition: '.6s ease',
                                left: "-" + (index + 1) * 1226 + "px"
                            });
                        }
                    })
                }



                clickDotItem();
                prevImg();
                nextImg();


                //通过修改图片大容器的left值，实现图片切换
            }
        </script>
    </div>
    <style>

    </style>
</body>

</html>